<template>
  <div class="goodsOrderList padding_20">
    <el-input v-model="param.number"
              placeholder="订单编号"
              class="input_1"
              @clear="handleQuery"
              clearable />
    <el-date-picker v-model="alltime"
                    type="daterange"
                    range-separator="至"
                    @change="handleQuery"
                    value-format='yyyy-MM-dd'
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
    </el-date-picker>
    <el-select v-model="param.orderStatus"
               class="input_1"
               placeholder="请选择发货状态"
               @change="handleQuery"
               clearable>
      <el-option :value="1"
                 label="待发货"></el-option>
      <el-option :value="3"
                 label="已发货"></el-option>
    </el-select>
    <el-select v-model="param.channelId"
               class="input_1"
               @change="handleQuery"
               placeholder="请选择订单来源"
               clearable>
      <el-option v-for="it in AllChannel"
                 :key="it.id"
                 :value="it.id"
                 :label="it.name"></el-option>
    </el-select>
    <el-button icon="ios-search"
               style="margin-left:10px"
               class="btn_1"
               @click="handleQuery">查询</el-button>

    <Table :columns="tableCol"
           :data="tableData"
           stripe
           border
           class="mt-20">
      <template slot-scope="{row}"
                slot="action">
        <span @click="handleView(row)">详细</span>
        <span v-if="row.orderStatus === 1"
              @click="sendGoods(row)">发货</span>
      </template>
    </Table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>

    <Modal v-model="sendGoodsView"
           title="发货"
           @on-ok="ok"
           @on-cancel="cancel">
      <div>物流公司：
        <Select v-model="logisticsId"
                style="width:260px">
          <Option v-for="item in logisticsList"
                  :value="item.id"
                  :key="item.id">{{ item.name }}</Option>
        </Select>
      </div>
      <div style="margin-top: 10px">
        物流编号： <Input v-model="logisticsNumber"
               placeholder="请输入物流编号"
               style="width: 260px" />
      </div>
    </Modal>

  </div>
</template>

<script>

  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'
  import { orderMgt } from '@/api/codeName'

  export default {
    name: "goodsOrderList",
    data () {
      return {
        alltime: '',
        sendGoodsView: false,
        logisticsNumber: "",
        logisticsId: null,
        tableCol: [
          {
            type: 'index2',
            title: '',
            width: 60,
            render: (h, params) => {
              return h('span', params.index + (this.page.pageIndex) * this.page.pageSize + 1);
            }
          },
          {
            title: '订单编号',
            key: 'number',
            width: 220
          },
          {
            title: '订单金额',
            key: 'price',
            width: 100,
            align: 'center'
          },
          {
            title: '创建时间',
            key: 'createTime',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'));
            }
          },
          {
            title: '订单来源',
            key: 'channelName',
            width: 120
          },
          {
            title: '推销账号',
            key: 'salesForce',
            width: 130
          },
          {
            title: '收货人',
            key: 'consignee',
            width: 100
          },
          {
            title: '联系电话',
            key: 'phone',
            width: 130
          },
          // {
          //   title: '订单状态',
          //   key: 'orderStatus',
          //   render: (h, params) => {
          //     for (let i = 0; i < orderMgt.goodsOrderMgt.orderStatus.length; i++) {
          //       if (params.row.orderStatus == orderMgt.goodsOrderMgt.orderStatus[i].code) {
          //         return h('span', orderMgt.goodsOrderMgt.orderStatus[i].name);
          //       }
          //     }
          //   }
          // },
          // {
          //   title: '支付类型',
          //   key: 'payType',
          //   render: (h, params) => {
          //     for (let i = 0; i < orderMgt.goodsOrderMgt.payType.length; i++) {
          //       if (params.row.payType == orderMgt.goodsOrderMgt.payType[i].code) {
          //         return h('span', orderMgt.goodsOrderMgt.payType[i].name);
          //       }
          //     }
          //   }
          // },
          // {
          //   title: '物流编号',
          //   key: 'logisticsNumber',
          // },
          {
            title: '商品详情',
            key: 'detailName',
            render: (h, params) => {
              let tmp = '';
              // if (params.row.orderItemList) {
              //   for (let i = 0; i < params.row.orderItemList.length; i++) {
              // tmp += params.row.orderItemList[i].goodsDetail.detailName + ' '
              // }
              // }
              return h('span',
                /* {
                  style: {
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                  }
                } */
                params.row.orderItemList[0].goodsItem ? params.row.orderItemList[0].goodsItem.name : '暂无');
            }
          },
          {
            title: '订单状态',
            key: 'orderStatus',
            width: 100,
            render: (h, params) => {
              if (params.row.orderStatus == '-1') {
                return h('span', '已取消');
              } else if (params.row.orderStatus == '0') {
                return h('span', '未付款');
              } else if (params.row.orderStatus == '1') {
                return h('span', '已付款');
              } else if (params.row.orderStatus == '2') {
                return h('span', '配货中');
              } else if (params.row.orderStatus == '3') {
                return h('span', '已发货');
              } else if (params.row.orderStatus == '4') {
                return h('span', '已签收');
              } else if (params.row.orderStatus == '5') {
                return h('span', '退款中');
              } else if (params.row.orderStatus == '6') {
                return h('span', '已退款');
              }
            }
          },
          {
            title: '操作',
            slot: 'action',
            width: 120,
            align: 'center'
          }
        ],
        tableData: [],
        pageTotal: 0,       //总条数
        wdStudioTypeList: [],
        hospitalList: [],
        logisticsList: [],
        loading: false,
        param: {
          detailName: '',
          startTime: '',
          endTime: ''
        },
        currentDataId: null,
        AllChannel: []
      }
    },
    mounted () {
      if (this.params.goodsOrderMgt) {
        this.param = this.params.goodsOrderMgt;
      } else {
        this.$store.commit('SET_PARAMS', { goodsOrderMgt: this.param });
      }

      this.post(this.api.cooperationHospital.getAllChannel, {}).then((res) => {
        if (res.data.code === '200') {
          this.AllChannel = res.data.object;
          this.AllChannel.push({
            id: -1,
            name: '其他'
          })
        }
      });
      this._getList();
      this.initLogisticsList();
    },
    methods: {
      initLogisticsList () {
        this.post(this.api.logistics.getAllLogistics, {}).then((res) => {
          if (res.data.code === '200') {
            this.logisticsList = res.data.object;
          }
        });
      },
      handleQuery () {
        if (this.alltime) {
          this.param.startTime = this.alltime[0];
          this.param.endTime = this.alltime[1];
        } else {
          this.param.startTime = null;
          this.param.endTime = null;
        }
        this.page.pageIndex=0
        this._getList();
      },
      handleView (row) {
        this.$router.push({ name: 'goodsOrderView', query: { id: row.id } });
      },
      sendGoods (row) {
        this.currentDataId = row.id;
        this.sendGoodsView = true;
      },
      ok () {
        if (!this.logisticsId) {
          this.$Message.error("请选择物流公司");
          return;
        }
        if (!this.logisticsNumber) {
          this.$Message.error("请输入物流编号");
          return;
        }
        let param = {
          id: this.currentDataId,
          logisticsId: this.logisticsId,
          logisticsNumber: this.logisticsNumber
        };
        this.post(this.api.goods.shipped, param).then((res) => {
          if (res.data.code === '200') {
            this._getList();
            this.cancel();
          }
        });
        this.sendGoodsView = false;
      },
      cancel () {
        this.logisticsNumber = "";
        this.logisticsId = null;
        this.currentDataId = null;
      },
      _getList () {
        this.ajax({
          type: this.api.goodsOrderList.type,
          url: this.api.goodsOrderList.url,
          data: Object.assign({}, this.page, this.param),
          success: (data) => {
            this.tableData = data.object;
            this.pageTotal = data.totalNum;
            this.$previewRefresh()
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      }
    },
    computed: {
      ...mapGetters([
        'page',
        'params'
      ])
    },
    components: {
      Page
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
</style>
